<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>长方形-系统函数</title>
</head>
<body>
rgba(111,111,111,0,5)
a 表示的是透明度
<br />
由上往下运行，如果上下运行结果一样那么最后运行的结果会覆盖前面结果

<canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px auto;">
	当前浏览器不支持canvas, 请更换浏览器后再试
</canvas>
<script>
	window.onload = function(){
		var canvas = document.getElementById("canvas");
		
		canvas.width = 800;
		canvas.height = 800;
		
		var context = canvas.getContext("2d");
		
		drawRect( context, 100, 100, 400, 400, 10, "#058", "blue");
		drawRect2( context, 300, 300, 400, 400, 10, "#058", "rgba(255, 255, 0, 0.4)");
		

	}
	
	/**长方形
	 * 
	 **/
	function drawRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){
		
		cxt.beginPath();
		cxt.moveTo( x, y);
		/*cxt.lineTo( x + width , y);
		cxt.lineTo( x + width, y + height);
		cxt.lineTo( x, y + height);
		引用系统函数 rect
		*/
		cxt.rect( x, y, width, height);
		cxt.closePath();
		
		cxt.lineWidth = borderWidth;
		cxt.fillStyle = fillColor;
		cxt.strokeStyle = borderColor;
		
		cxt.fill();
		cxt.stroke();
		
		}
		
	function drawRect2(cxt, x, y, width, height, borderWidth, borderColor, fillColor){
		
		cxt.lineWidth = borderWidth; //传入边框大小
		cxt.fillStyle = fillColor;   //传入填弃颜色
		cxt.strokeStyle = borderColor; //传入边框颜色
		
		cxt.fillRect( x, y, width, height); //矩形大小
		cxt.strokeRect(x, y, width, height); //边框大小
		
		}
	
</script>
</body>
</html>
